<template>
<right-drawer title="排行榜" :show="show">
  <select-field slot="right" :options="opts" :value="this.opts[0]" :on-choice="getRank" placeholder="选择排行榜"></select-field>
  <div class="rank">
    <list>
      <item v-for="item in items">
        <item-media>
          <img :src="item.ic" />
          <badge :value="($index+1).toString()"></badge>
        </item-media>
        <item-content>
          <item-title-row>
            <item-title>{{item.nn}}</item-title>
            <item-title-after>{{item.date}}</item-title-after>
          </item-title-row>
          <item-sub-title>
            数量:{{item.value}}
          </item-sub-title>
        </item-content>
      </item>
    </list>
  </div>
</right-drawer>
</template>

<script>
import rightDrawer from './rightDrawer'
import { isShowRank, getRankOpts, getRankItems } from '../../vuex/getters'
import { getRank } from '../../vuex/actions'
export default {
  vuex: {
    getters: {
      show: isShowRank,
      opts: getRankOpts,
      items: getRankItems
    },
    actions: {
      getRank
    }
  },
  components: {
    rightDrawer
  }
}
</script>

<style lang="less">
.rank{
  padding: 0px 10px;
  padding-bottom: 40px;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  z-index: -1;
  .badge{
    position: absolute;
    top: 20px;
    left: 5px;
    background-color: #33475f;
  }
  .item-media{
    padding-left: 25px;
  }
  .item-sub-title{
    font-size: 12px;
    color: #56abe4
  }
}
</style>
